<template>
  <div class="cardDiv" style="width: 100%; height: 100%">
    <a-card style="width: 100%; height: 100%">
      <template #title>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ getTitle.value }} </span>
      </template>
      <template #extra>
        <a-button
          type="default"
          v-auth="'bas:calendar:edit'"
          class="m-1 pr-1"
          @click="openModal(true, '年初始化')"
        >
          <Icon icon="simple-line-icons:settings" />
          <span> 年初始化 </span>
        </a-button>
        <a-button type="default" v-auth="'bas:calendar:edit'" @click="openModal(true, '月初始化')">
          <Icon icon="simple-line-icons:settings" />
          <span> 月初始化 </span>
        </a-button>
      </template>
      <div style="display: flex; justify-content: space-between; height: 100%">
        <div style="width: 50%; border: 1px solid #aaa">
          <a-calendar
            v-model:value="value"
            valueFormat="YYYY-MM-DD"
            @select="onSelect"
            @change="change"
          >
            <template #dateCellRender="{ current }">
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <p>{{ getListData(current) }}</p>
              </div>
             
            </template>
          </a-calendar>
        </div>
        <div class="tab">
          <p>
            <span>当前日期： </span>
            <span>{{ value }}</span>
          </p>
          <div>
            <span>日历排班： </span>
            <a-table
              :columns="tableColumns"
              :data-source="dataSource"
              :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
              :pagination="false"
              :scroll="{ x: 500 }"
            >
              <template v-if="dateFlag <= value" #bodyCell="{ record, index, column }">
                <template v-if="column.dataIndex == 'teamName'">
                  <a-input v-model:value="record[column.dataIndex]" style="text-align: center" />
                  <!-- <a-time-picker v-model:value="record[column.dataIndex]" value-format="HH:mm" @change="changeDate"/> -->
                </template>

                <template v-if="column.dataIndex != 'teamName'">
                  <!-- <a-input v-model:value="record[column.dataIndex]" style="text-align: center;"/> -->
                  <a-time-picker
                    v-model:value="record[column.dataIndex]"
                    value-format="HH:mm"
                    @change="changeDate"
                  />
                </template>

              </template>
            </a-table>
          </div>

          <div
            v-if="dateFlag <= value"
            style="display: flex; justify-content: center; align-items: center; margin-top: 20px"
          >
            <a-button type="primary" @click="save()" v-auth="'bas:calendar:edit'">
              <Icon icon="ant-design:check-outlined" />
              <span> 保存 </span>
            </a-button>
          </div>
        </div>
      </div>
    </a-card>
    <Modal @register="register" @success="listData" />
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsBasCalendarList',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref, onMounted, reactive } from 'vue';
  import { Dayjs } from 'dayjs';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import Modal from './Modal.vue';
  import { useModal } from '/@/components/Modal';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { findYMD, saveStr } from '/@/api/bas/calendar';
  // import type { TableColumnsType } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
 

  const { t } = useI18n('bas.calendar');
  const { showMessage } = useMessage();
  function changeDate(e) {
    console.log(e);
  }
 
  let dataSource = ref<any>([
   
  ]);
  const getTitle = ref({
    // 表格标题图标
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || '数据管理',
  });
  const value = ref<any>('');
  const [register, { openModal }] = useModal();
  type Key = string | number;
  const state = reactive<{
    selectedRowKeys: Key[];
    loading: boolean;
  }>({
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  });

  const onSelectChange = (selectedRowKeys: Key[]) => {
    state.selectedRowKeys = selectedRowKeys;
  };

  
  const onSelect = async (e) => {
    value.value = e;
    let arr = e.split('-');
    let objDate = {
      year: arr[0],
      month: arr[1],
      day: '1',
    };
    await listData(objDate);
    dataSource.value = [];
    state.selectedRowKeys = [];
    date.value.forEach((item) => {
      if (item.cdate == e) {
        dataSource.value = item.teamList;

        dataSource.value.forEach((i) => {
          i.key = i.teamName;
        });
        state.selectedRowKeys = item.teamNames.split(',');
      }
    });
  };
  function change(e) {
    console.log(e);
  }

  //配置表格表头菜单*****************
  const tableColumns: BasicColumn[] = [
    {
      title: t('班组名称'),
      dataIndex: 'teamName',
      key: 'a.teamName',
      width: 100,
      align: 'center',
      editRow: true, //编辑行
      editComponent: 'Input', //编辑行类型
      editRule: true,
    },
    {
      title: t('上班时间'),
      dataIndex: 'toworkdate',
      key: 'a.toworkdate',
      width: 100,
      align: 'center',
      editRow: true,
      editComponent: 'Input',
      editRule: true,
    },
    {
      title: t('下班时间'),
      dataIndex: 'offworkdate',
      key: 'a.offworkdate',
      width: 100,
      align: 'center',
      editRow: true,
      editComponent: 'Input',
      editRule: true,
    },
    {
      title: t('开始休息'),
      dataIndex: 'strestdate',
      key: 'a.strestdate',
      width: 100,
      align: 'center',
      editRow: true,
      editComponent: 'Input',
      editRule: false,
    },
    {
      title: t('结束休息'),
      dataIndex: 'edrestdate',
      key: 'a.edrestdate',
      width: 100,
      align: 'center',
      editRow: true,
      editComponent: 'Input',
      editRule: false,
    },
  ];

  let date = ref<any>([]);
  let objNewDate = ref<any>({});
  let dateFlag = ref<any>('');
  onMounted(async () => {
   
    var myDate = new Date();
    objNewDate.value = {
      year: myDate.getFullYear(),
      month: myDate.getMonth() + 1,
      day: '1',
    };
   
    let y = myDate.getFullYear();
    let m = myDate.getMonth()+1<10? `0${myDate.getMonth()+1}`: myDate.getMonth()+1;
    let d = myDate.getDate()<10? `0${myDate.getDate()}`: myDate.getDate();
    dateFlag.value=`${y}-${m}-${d}`

    listData(objNewDate.value);
  });
  async function listData(datas = objNewDate.value) {
    const res = await findYMD(datas);
    date.value = res.data;
  }

  const getListData = (value: Dayjs) => {
    
    let str = '';
    date.value.forEach((item) => {
      if (
        item.iyear == value.year() &&
        item.imonth == value.month() + 1 &&
        item.iday == value.date()
      ) {
        str = item.teamNames;
      }
    });

    return str;
  };

  async function save() {

    let newArray = dataSource.value.filter((x) => {
      return state.selectedRowKeys.includes(x.teamName);
    });
    let data = {
      teamNames: state.selectedRowKeys.join(','),
      teamLists: JSON.stringify(newArray),
      cdate: value.value,
    };
    const res = await saveStr(data);

    let arr = data.cdate.split('-');
    let objDate = {
      year: arr[0],
      month: arr[1],
      day: '1',
    };
    listData(objDate);
    showMessage(res.message);
  }
</script>
<style scoped lang="less">
  /deep/
    .ant-picker-calendar-full
    .ant-picker-panel
    .ant-picker-cell-selected
    .ant-picker-calendar-date,
  .ant-picker-calendar-full
    .ant-picker-panel
    .ant-picker-cell-selected:hover
    .ant-picker-calendar-date,
  .ant-picker-calendar-full
    .ant-picker-panel
    .ant-picker-cell-selected
    .ant-picker-calendar-date-today,
  .ant-picker-calendar-full
    .ant-picker-panel
    .ant-picker-cell-selected:hover
    .ant-picker-calendar-date-today {
    background: #cfdff0;
  }
  /deep/.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today {
    border-color: #e5e7eb;
    background: #fbbb67;
  }
  /deep/.ant-picker-calendar-header .ant-picker-calendar-mode-switch {
    display: none;
  }
  /deep/.ant-picker-calendar-header .ant-picker-calendar-month-select {
    margin-right: 8px;
  }
  .tab {
    width: 49%;
    border: 1px solid #aaa;
    padding: 20px;
    font-size: 20px;
    color: blue;
    font-family: serif;
  }
  .icon {
    cursor: pointer;
  }
  .events {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .events .ant-badge-status {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  .notes-month {
    text-align: center;
    font-size: 28px;
  }
  .notes-month section {
    font-size: 28px;
  }

  /deep/.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date {
    border: 1px solid #f0f0f0;
  }
  /deep/.ant-card-body {
    height: calc(100% - 50px);
  }
  /deep/.ant-picker-calendar {
    height: 100%;
  }
  /deep/.ant-picker-body {
    height: 100%;
  }

  /deep/.ant-picker-date-panel {
    height: 100%;
  }
  /deep/.ant-picker-content {
    height: 100%;
  }

  /deep/.ant-picker-panel {
    height: calc(100% - 60px);
  }
</style>
